<script setup lang="ts">
import type { FingerType } from '@/stores/finger'

const {
  fingerX,
  fingerY,
  size,
  type,
  isReverse,
  isShowFinger,
} = storeToRefs(useFinger())

interface FingerAnimeContent {
  path: string
  class?: string
}
type FingerAnime = Record<FingerType, FingerAnimeContent>

const figerAnime: FingerAnime = {
  'click': {
    path: new URL('@/assets/animation/click.png', import.meta.url).href,
    class: 'click-anime',
  },
  'left-slide': {
    path: new URL('@/assets/animation/left_slide.png', import.meta.url).href,
    class: 'left-slide-anime finger-zomm-05',
  },
  'right-slide': {
    path: new URL('@/assets/animation/right_slide.png', import.meta.url).href,
    class: 'right-slide-anime finger-zomm-05',
  },
  'top-slide': {
    path: new URL('@/assets/animation/top_slide.png', import.meta.url).href,
    class: 'top-slide-anime finger-zomm-05',
  },
}
const currentAnime = computed(() => {
  return figerAnime[type.value]
})
</script>

<template>
  <div
    v-if="isShowFinger" class="fixed top-0 left-0 z-99999999 transition-all pointer-events-none"
    :style="{ transform: `translate(${fingerX}px,${fingerY}px)` }"
  >
    <img :width="size" :height="size" :src="currentAnime.path" class="finger-img" :class="[currentAnime.class, isReverse && 'is-reverse']">
  </div>
</template>

<style scoped>
.finger-img{
  object-fit: cover;
  object-position: 0 0;
  zoom:0.7;
}

.finger-zomm-05{
  zoom:0.5;
}

.is-reverse{
  transform: scaleX(-1);
}

.click-anime {
  width: 89px;
  height: 70px;
  animation: click-anime 1s steps(24) 0s infinite;
}

@keyframes click-anime {
  100% {
    /* 背景图片宽度为 2134px */
    object-position: -2136px 0;
  }
}

.left-slide-anime {
  width: 337px;
  height: 97px;
  animation: left-slide-anime 1.5s steps(24) 0s infinite;
}

@keyframes left-slide-anime {
  100% {
    object-position: -8136px 0;
  }
}

.right-slide-anime {
  width: 371px;
  height: 114px;
  animation: right-slide-anime 1.5s steps(24) 0s infinite;
}

@keyframes right-slide-anime {
  100% {
    object-position: -8952px 0;
  }
}

.top-slide-anime {
  width: 84px;
  height: 146px;
  animation: top-slide-anime 1.5s steps(24) 0s infinite;
}

@keyframes top-slide-anime {
  100% {
    object-position: -2064px 0;
  }
}
</style>
